'use client'
import { useGSAP } from "@gsap/react";
import Image from "next/image";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import gsap from "gsap";

const Headquarters = () => {
  const [activeIndex, setActiveIndex] = useState(0)


  useGSAP(() => {
    // 元素进入动画
    gsap.to('.headquarters li', {
      opacity: 1,
      y: 0,
      stagger: 0.4, // 每个元素的延迟时间
      duration: 0.8,
      ease: 'power2.out',
    })
  })
  
  return (
    <ul className='headquarters block md:flex items-center justify-between space-x-0 md:space-x-[15px] lg:space-x-[26px] space-y-[10px] md:space-y-0'>
      <li className={twMerge('group rounded-[6px] opacity-0 translate-y-[20px] overflow-hidden relative w-full md:w-[280px] transition-all ease-out duration-700', activeIndex === 0 && 'w-full md:w-[1058px]')} onMouseEnter={() => setActiveIndex(0)}>
        <div className='h-[240px] md:h-[624px] relative group-hover:scale-110 transition-transform duration-700'>
          <Image src="/images/contact/shanghai.png" alt="map" fill className="object-cover" />
        </div>
        <div className={twMerge('absolute bottom-0 left-0 w-full md:w-[1058px] bg-[rgba(33,100,176,0.82)] backdrop-blur-sm text-white flex items-end pl-[20px] md:pl-[94px] pt-[10px] md:pt-[25px] pb-[10px] md:pb-[25px] transition-colors ease-out duration-700', activeIndex !== 0 && 'bg-transparent text-white')}>
          <div className='w-[16px] md:w-[24px] h-[22px] md:h-[35px] relative mr-[20px]'><Image src='/images/location-icon.png' alt='location' fill /></div>
          <span className='text-base md:text-[24px] md:leading-[24px]'>上海总部</span>
          {activeIndex === 0 && (
            <>
              <i className='w-[1px] bg-[#fff] h-[25px] mx-[20px]'></i>
              <span className="text-sm md:text-base">杨浦区政立路497号国正中心1号楼</span>
            </>
          )}
        </div>
        <div className='absolute top-[20px] md:top-[50px] right-[20px] md:right-[45px] w-[18px] md:w-[36px] h-[150px] md:h-[249px]'>
          <Image alt="" fill src='/images/shanghai.png' />
        </div>
      </li>
      <li className={twMerge('group rounded-[6px] opacity-0 translate-y-[20px] overflow-hidden relative w-full md:w-[280px] transition-all ease-out duration-700', activeIndex === 1 && 'w-full md:w-[1058px]')} onMouseEnter={() => setActiveIndex(1)}>
        <div className='h-[240px] md:h-[624px] relative group-hover:scale-110 transition-transform duration-700'>
          <Image src="/images/contact/guangzhou.png" alt="map" fill className="object-cover" />
        </div>
        <div className={twMerge('absolute bottom-0 left-0 w-full md:w-[1058px] bg-[rgba(33,100,176,0.82)] backdrop-blur-sm text-white flex items-end pl-[20px] md:pl-[94px] pt-[10px] md:pt-[25px] pb-[10px] md:pb-[25px] transition-colors ease-out duration-700', activeIndex !== 1 && 'bg-transparent text-white')}>
          <div className='w-[16px] md:w-[24px] h-[22px] md:h-[35px] relative mr-[20px]'><Image src='/images/location-icon.png' alt='location' fill /></div>
          <span className='text-base md:text-[24px] md:leading-[24px]'>北京</span>
          {activeIndex === 1 && (
            <>
              <i className='w-[1px] bg-[#fff] h-[25px] mx-[20px]'></i>
              <span className="text-sm md:text-base">海淀区中关村南大街2号院1号楼数码大厦A座</span>
            </>
          )}
        </div>
        <div className='absolute top-[20px] md:top-[50px] right-[20px] md:right-[45px] w-[18px] md:w-[36px] h-[100px] md:h-[189px]'>
        <Image alt="" fill src='/images/beijing.png' />
        </div>
      </li>
      <li className={twMerge('group rounded-[6px] opacity-0 translate-y-[20px] overflow-hidden relative w-full md:w-[280px] transition-all ease-out duration-700', activeIndex === 2 && 'w-full md:w-[1058px]')} onMouseEnter={() => setActiveIndex(2)}>
        <div className='h-[240px] md:h-[624px] relative group-hover:scale-110 transition-transform duration-700'>
          <Image src="/images/contact/wuhan.png" alt="map" fill className="object-cover" />
        </div>
        <div className={twMerge('absolute bottom-0 left-0 w-full md:w-[1058px] bg-[rgba(33,100,176,0.82)] backdrop-blur-sm text-white flex items-end pl-[20px] md:pl-[94px] pt-[10px] md:pt-[25px] pb-[10px] md:pb-[25px] transition-colors ease-out duration-700', activeIndex !== 2 && 'bg-transparent text-white')}>
          <div className='w-[16px] md:w-[24px] h-[22px] md:h-[35px] relative mr-[20px]'><Image src='/images/location-icon.png' alt='location' fill /></div>
          <span className='text-base md:text-[24px] md:leading-[24px]'>武汉</span>
          {activeIndex === 2 && (
            <>
              <i className='w-[1px] bg-[#fff] h-[25px] mx-[20px]'></i>
              <span className="text-sm md:text-base">洪山区高新大道221号泷悦国际大厦1701</span>
            </>
          )}
        </div>
        <div className="absolute top-[20px] md:top-[50px] right-[20px] md:right-[45px] w-[18px] md:w-[35px] h-[100px] md:h-[181px]">
          <Image alt="" fill src='/images/wuhan.png' />
        </div>
      </li>
    </ul>
  )
}

export default Headquarters